<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>动态卷帘</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-cesium-local.js"></script>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
    <script>
        //在JS脚本开发中使用严格模式，及时捕获一些可能导致编程错误的ECMAScript行为
        'use strict';
        //定义三维视图的主要类
        var webGlobe;
        //定义三维瓦片类
        var drilllayer;
        var landscapeLayer;
        var dynaCut;
        var dynaCut1;
        var planetEntity;
        var planetEntity1;
        var distance = 500;
        var distance1 = -500;

        function init() {
            //构造三维视图类（视图容器div的id，三维视图设置参数）
            webGlobe = new Cesium.WebSceneControl('GlobeView', {});

            if (webGlobe) {
                if (webGlobe) {
                    //设置地下模式
                    webGlobe.viewer.scene.globe.undergroundMode = true;
                    //大气显示
                    webGlobe.viewer.scene.skyAtmosphere.show = false;
                    //大气显示
                    webGlobe.viewer.scene.skyAtmosphere.showGroundAtmosphere = false;
                    //透明度
                    webGlobe.viewer.scene.globe.enableTransparent = true;
                    webGlobe.viewer.scene.globe.transparent = 0.0;
                    webGlobe.viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0.00001);
                    //开启地形深度检测
                    webGlobe.viewer.scene.globe.depthTestAgainstTerrain = true;
                    //初始化视图功能管理类
                    var sceneManager = new CesiumZondy.Manager.SceneManager({
                        viewer: webGlobe.viewer
                    });
                    //视点跳转
                    sceneManager.flyToEx(112.94845170512113, 30.004246325952618, {
                        height: 2600,
                        heading: 67,
                        pitch: -30,
                        roll: 0
                    });
                    //构造M3D模型层管理对象
                    var m3dLayer = new CesiumZondy.Layer.M3DLayer({
                        viewer: webGlobe.viewer
                    });
                    var { protocol, ip, port } = window.webclient;
                    drilllayer = m3dLayer.append(
                        `${protocol}://${ip}:${port}/igs/rest/g3d/钻孔_2_钻孔模型s`, {
                        autoReset: false
                    }
                    );
                    //加载M3D地图文档（服务地址，配置参数）
                    landscapeLayer = m3dLayer.append(`${protocol}://${ip}:${port}/igs/rest/g3d/钻孔分层点_Sur_000_Ent`, {
                        autoReset: false,
                        loaded: function (layer) {
                            DynamicCutting();
                        }
                    });
                }
            }
        }

        function DynamicCutting() {
            webGlobe.deleteDynamicCutting(dynaCut);
            //进行剖切分析的面，向右切
            var plane = new Cesium.ClippingPlane(new Cesium.Cartesian3(1, 0, 0), -200.0)
            //进行剖切分析的面，向左切
            var plane1 = new Cesium.ClippingPlane(new Cesium.Cartesian3(-1, 0, 0), -200.0)
            //创建剖切
            dynaCut = webGlobe.createDynamicCutting(landscapeLayer, [plane], {
                color: new Cesium.Color(1.0, 1.00, 1.0, 0.3)
            });
            //获取剖切切面
            planetEntity = dynaCut.planes[0];
            //设置切面回调函数
            planetEntity.plane.plane = new Cesium.CallbackProperty(function (date) {
                //设置剖切面距离
                plane.distance = distance;
                return Cesium.Plane.transform(plane, landscapeLayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0));
            }, false);
            //创建剖切
            dynaCut1 = webGlobe.createDynamicCutting(drilllayer, [plane1], {
                color: new Cesium.Color(1.0, 0, 0, 0.3)
            });
            //获取剖切切面
            planetEntity1 = dynaCut1.planes[0];
            //设置切面回调函数
            planetEntity1.plane.plane = new Cesium.CallbackProperty(function (date) {
                //设置剖切面距离
                plane1.distance = distance1;
                return Cesium.Plane.transform(plane1, drilllayer[0].modelMatrix, new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 0.0));
            }, false);
        }

        function change() {
            distance = Number(document.getElementById('range').value);
            distance1 = -Number(document.getElementById('range').value);
        }
    </script>
</head>

<body onload="init()">

    <div id="GlobeView">
        <div class="message" style="left: 10px;">
            <span>
                <font>卷帘距离：</font><input type="range" id="range" min="-4000" max="1000" value="500"
                    oninput="change()" />
            </span>
        </div>
    </div>
</body>

</html>